<template>
<!-- 图片裁剪 -->
  <div class="cropper">
    <header>
      <status-bar></status-bar>
      <div class="btn-box">
        <span class="cancal" @click="cancal">取消</span>
        <span class="confirm" @click="confirm">确定</span>
      </div>
    </header>
    <vue-cropper ref="cropper" class="cropper-wrapper"
      :img="img"
      :outputType="option.outputType"
      :info="option.info"
      :autoCrop="option.autoCrop"
      :autoCropWidth="option.autoCropWidth"
      :autoCropHeight="option.autoCropHeight"
      :fixedBox="option.fixedBox"
      :full="option.full"
      :canMoveBox="option.canMoveBox"
      :original="option.original"
      :centerBox="option.centerBox"
    >
    </vue-cropper>

    <!-- <button class="upload" @click="upload">上传</button> -->
    <!-- <input type="file" name="upload" class="upload-input" @change="uploadImg"
    accept="image/gif,image/jpeg,image/jpg,image/png" ref="uploadInput"> -->


  </div>
</template>

<script type="text/ecmascript-6">

import StatusBar from 'components/status-bar'

import VueCropper from 'vue-cropper'

export default {
  // props: {
  //   img: {
  //     type: String,
  //     default: 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png', //  裁剪图片的地址
  //   }
  // },
  data() {
    return {
      option: {
        // img: 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png', //  裁剪图片的地址
        outputSize: 1, //  裁剪图片生成的质量
        outputType: 'png', //  裁剪图片生成的格式
        info: false, //	裁剪框的大小信息	true	true || false
        canScale: true, //	图片是否允许滚轮缩放	true	true || false
        autoCrop: true, //	是否默认生成截图框	false	true || false
        autoCropWidth: 300, //	默认生成截图框宽度	容器的80%	0~max
        autoCropHeight: 300, //	默认生成截图框高度	容器的80%	0~max
        fixed: true, //	是否开启截图框宽高固定比例	true	true | false
        // fixedNumber: [1, 1], //	截图框的宽高比例	[1 : 1]	[宽度 : 高度]
        full: true, //	是否输出原图比例的截图	false	true | false
        fixedBox: true, //	固定截图框大小 不允许改变	false	true | false
        canMove: true, //	上传图片是否可以移动	true	true | false
        canMoveBox: false, //	截图框能否拖动	true	true | false
        original: true, //	上传图片按照原始比例渲染	false	true | false
        centerBox: true, //	截图框是否被限制在图片里面	false	true | false
        high: true //	是否按照设备的dpr 输出等比例图片	true	true | false
      },
      img: this.$route.query.img
    }
  },
  components: {
    VueCropper,
    StatusBar
  },

  methods: {
    cancal: function () {
      this.$router.goBack()
    },
    confirm: function () { 
      this.$refs.cropper.getCropData(result => {
      localStorage.cropperImg = result
      })
      this.$router.goBack()
    }


    // upload: function () {
    //   this.$refs.uploadInput.click()
    // },
    // uploadImg: function (e) {
    //   let file = e.target.files[0] 
    //   let reader = new FileReader()
    //   let _this = this
    //   reader.readAsDataURL(file)  
    //   reader.onload = function(e) {  
    //     _this.img = this.result
    //     console.log(this.result)
    //   }
    // }
  }

}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/variable.styl'

.cropper
  position absolute
  width 100%
  height 100%
  background-color #fff
  z-index 100
header 
  display block
  width 100%
  .btn-box
    display flex
    justify-content space-between
    align-items center
    height 30px
    padding 0 15px
    font-size $font-size-small 
    color $color-theme
    span 
      line-height 1

// .upload
//   position absolute
//   bottom 0
// .upload-input
//   display none 


</style>
